<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view v-if="nav" :style="'height:' + nav + 'px;'"></view>
		<navigator class="next" hover-class="none" url="/pages/student/guide/target">
			<text>跳过</text>
		</navigator>
		<view class="chose">您的历史平均杆</view>
		<view class="content">
			<view :class="v.dictValue == hisAvg ? ['row', 'active'] : ['row']" v-for="(v, k) in info" @click="chose(v.dictValue)">{{ v.dictLabel }}</view>
		</view>
		<view class="bottom">
			<navigator class="btn" hover-class="none" url="/pages/student/guide/gender">上一步</navigator>
			<view class="n btn" @click="save()">下一步</view>
		</view>
	</view>
</template>

<script>
import { getDictionary } from '@/api/student';
export default {
	data() {
		return {
			info: '',
			hisAvg: '',
			nav: ''
		};
	},
	methods: {
		chose(id) {
			this.hisAvg = id;
		},
		save() {
			uni.setStorageSync('hisAvg', this.hisAvg);
			uni.navigateTo({
				url: '/pages/student/guide/target'
			});
		},
		getInfo() {
			getDictionary({ name: 'his_average' }).then(res => {
				this.info = res;
			});
		}
	},
	onLoad() {
		this.hisAvg = uni.getStorageSync('hisAvg')
		// #ifdef MP-WEIXIN
		this.nav = uni.getMenuButtonBoundingClientRect().height;
		// #endif
	},
	onShow() {
		this.getInfo();
	}
};
</script>

<style>
.next {
	margin-right: 40rpx;
	padding-top: 20rpx;
	display: flex;
	justify-content: flex-end;
}
.content {
	margin-top: 80rpx;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 0 60rpx;
}
.content .row {
	width: 196rpx;
	height: 88rpx;
	background: #f0f2f5;
	border-radius: 16rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #585c66;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
}
.content .row:nth-child(3n) {
	margin-right: 0;
}
.content .active {
	background: #00ab64;
	color: #ffffff;
}
.next text {
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #585c66;
}
.chose {
	margin-top: 56rpx;
	text-align: center;
	font-size: 48rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #1a2233;
}
.bottom {
	position: fixed;
	left: 0;
	width: 100%;
	bottom: 108rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
}
.bottom .btn {
	width: 300rpx;
	height: 80rpx;
	background: #e8efed;
	border-radius: 16rpx;
	margin-right: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #00ab64;
}
.bottom .btn:hover {
	background: #00ab64;
	color: #ffffff;
}
.bottom .n {
	margin-right: 0;
}
</style>
